<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>表格管理</title>
  </head>
  <body>
    <div class="container">
        <h1>表格管理</h1>
        <button type="button" class="btn btn-primary" onclick="list();">查询</button>
        <table class="table">
            <thead>
              <tr>
                <th scope="col">主键</th>
                <th scope="col">姓名</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody id="table-body">
            </tbody>
          </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    
    <script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>

    <script id="table-template" type="x-tmpl-mustache">
        {{ #list }}
        <tr>
            <td>{{id}}</td>
            <td>{{name}}</td>
            <td>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#saveDialog" data-bs-title="编辑" data-bs-id="{{id}}" data-bs-name="{{name}}">编辑</button>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteDialog" data-bs-title="删除" data-bs-content="确定删除吗？" data-bs-id="{{id}}">
                    删除
                </button>
            </td>
        </tr>
        {{ /list }}
    </script>
    
    <script>
        const tableTemplate = document.getElementById('table-template').innerHTML
        const tableBody = document.getElementById('table-body')
        var tableData = [] // 保存表格数据
        // 查询表格数据
        var list = function(){
            // TODO 请求后端接口获得数据
            setTimeout(function(){
                tableData = [
                        {
                            id: Math.round(Math.random())*10,
                            name: '浦口'
                        },
                        {
                            id: Math.round(Math.random())*10 + 20,
                            name: '六合'
                        },
                        {
                            id: Math.round(Math.random())*10 + 30,
                            name: '建邺'
                        },
                        {
                            id: Math.round(Math.random())*10 + 40,
                            name: '江宁'
                        },
                    ]
                loadTable()
            }, 100)
        }

        var loadTable = function(){
            tableBody.innerHTML = Mustache.render(tableTemplate, {
                list: tableData
            })
        }
        
    </script>



  </body>
</html>